<template>
	<view>
		<u-navbar title="新闻详情" @leftClick="toHome" :autoBack="false" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" bgColor="#e60000" class="navBarHeight" />
		<view class="p-20 border-box bg-white">
			<view class="color-b font-18 font-b">{{ articleData.title }}</view>
			<view class="w-100 m-t-10 flex">
				<image class="imgBox" src="https://image.yanchaochao.com/file/20240131/170666191897691176.png" />
				<view class="m-l-10">
					<view class="color-b font-15 font-b">{{articleData.authorName}}</view>
					<view class="font-12 color-gray">{{articleData.createTime}}</view>
				</view>
			</view>
			<view class="p-20 border-box w-100">
				<view class="richText" v-html="articleData.details"></view>
			</view>
		</view>
	</view>

</template>

<script>
	import { searchNewsDetail } from '@/common/api/news.js';
	export default {
		data() {
			return {
				articleData: {}
			};
		},
		onLoad(options){
			let id = options.id || null;
			if(id){
				this.getDetailData(id)
			}
		},
		methods: {
			toHome(){
				uni.navigateBack()
				uni.$emit('loadPage',true)
			},
			getDetailData(id){
				searchNewsDetail(id).then(res => {
					if(res.code === 200){
						// 处理video的宽度样式问题
						if(res.data.details && res.data.details.indexOf('<video') != -1){
							let arr = res.data.details.split('<video')
							let str = '';
							if(arr.length >= 2){
								arr.forEach((item,index) => {
									if(index != 0){
										str = str+'<video style="width:100% !important"'+item
									}else{
										str = str+item
									}
								})
							}
							res.data.details = str
						}
						this.articleData = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
page{
	background: #FFFFFF;
	min-height: 100vh;
}
.header-bg {
  padding: 2% 4%;
  box-sizing: border-box;
}
.contentBox{
	background: linear-gradient(90deg, #FFE2E2, #FFFEFE);
}
.imgBox{
	width: 70rpx;
	height: 70rpx;
	border-radius: 70rpx;
}
::v-deep .u-search__content{
	background-color: #ffffff !important;
}
::v-deep .u-search__content__input{
	background-color: #ffffff !important;
}
::v-deep .richText img{
	object-fit: contain !important;
	width: calc(100vw - 80rpx) !important;
}
::v-deep .richText div video{
	width: 100% !important;
	overflow: hidden;
}
</style>